<template>
  <el-card class="box-card">
    <div class="card-title">
      <span>{{ card_title }}</span>
    </div>
    <div class="card-content">
      <template v-for="(value, index) in items">
        <div class="item-content">
          <span>{{ value.content }}</span>
          <div v-if="value.value == 100" class="right-label" :style="{ backgroundColor:'#05ff01'  }">{{ value.value + '%' }}</div>
          <div v-else-if="value.value >= 96" class="right-label" :style="{ backgroundColor:'#fedd31'}">{{ value.value + '%' }}</div>
          <div v-else class="right-label" :style="{ backgroundColor:'#f75363'}">{{ value.value + '%' }}</div>
        </div>
        <template v-if="index != 4">
          <hr
            style="margin: 2px soild"
            color=#e7e7e7
            size=1
          />
        </template>
      </template>
    </div>
    </div>
  </el-card>
</template>
<script>
export default {
  props: {
    card_title: String
  },
  data() {
    return {
      items: [
        {
          content: "糖化",
          value: 100
        },
        {
          content: "发酵",
          value: 95
        },
        {
          content: "过滤",
          value: 97
        },
        {
          content: "清酒",
          value: 97
        },
        {
          content: "包装",
          value: 93
        }
      ]
    };
  }
};
</script>
<style scoped>
.item-content {
  line-height: 1.8;
  height: 8%;
  /* 让鼠标不能选中 */
  user-select: none;
}
.right-label {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background-color: #676668;
  float: right;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  color: white;
  text-align: center
}
.box-card {
  line-height: 20px;
  border-radius: 10px;
  width: 100%;
}
.card-title {
  position: relative;
  text-align: left;
  width: 100%;
  height: 40%;
  font-size: 20px;
  color: #676668;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* 让鼠标不能选中 */
  user-select: none;
}
.card-content {
  position: relative;
  text-align: left;
  margin-top: 5%; 
  height: 55%;
  font-size: 13px;
  color: #808081;
}
</style>
